<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
	<meta charset="UTF-8">
	<title>Online-pdf</title>
    <link rel="stylesheet"  href = "/ins/codemirror/lib/codemirror.css" >
    <link rel="stylesheet"  href = "/ins/codemirror/theme/darcula.css" >
    <link rel="stylesheet" href="/ins/index.css">

    <script src="/ins/jquery.min.js"></script>
    <script src="/ins/codemirror/lib/codemirror.js"></script>
    <!--html代码高亮-->
    <script src="/ins/codemirror/mode/xml/xml.js"></script>
    <script src="/ins/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <!--html代码高亮-->
    <!--css代码高亮-->
    <script src="/ins/codemirror/mode/css/css.js"></script>
    <!--css代码高亮-->
    <!--javascript代码高亮-->
    <script src="/ins/codemirror/mode/javascript/javascript.js"></script>
    <!--javascript代码高亮-->
    <!--html标签自动闭合-->
    <script src="/ins/codemirror/addon/fold/xml-fold.js"></script>
    <script src="/ins/codemirror/addon/edit/closetag.js"></script>
    <!--html标签自动闭合-->
    <script src="/ins/codemirror/addon/edit/closebrackets.js"></script>
    <!--代码的注释-->
    <script src="/ins/codemirror/addon/comment/comment.js"></script>
    <!--代码的注释-->
</head>
<body>
    <div class="container">
        <!-- Left content -->
        <div class="container-ide">
            <div class="operating">
                <header class="operating-header">
                    <div class="m-title">组织：XX项目
                        <div class="opts">
                            <a class="opt-btn">登录</a>
                        </div>
                    </div>
                </header>
                <main class="operating-main">
                    <div class="m-menu">
                        <div class="tool">
                            <i id="tool-subtract" class="tool-item">➖</i>
                            <i id="tool-add"  class="tool-item">➕</i>
                        </div>
                        <ul class="u-doc-list">
                            <li class="doc" th:each="i : ${arr}">文档001</li>
                            <li class="doc doc-active">哥特风</li>
                        </ul>
                    </div>
                    <div id="edit" class="m-edit">
                        <div class="u-tabs">
                            <div id="tab-document" class="tab tab-active">Document</div>
                            <div id="tab-style" class="tab">Style</div>
                            <div id="tab-data" class="tab">Data</div>
                        </div>
                        <div class="codes">
                            <div class="u-code" form="tab-document">
                                <textarea></textarea>
                            </div>
                            <div class="u-code" form="tab-style">
                                <textarea></textarea>
                            </div>
                            <div class="u-code" form="tab-data">
                                <textarea></textarea>
                            </div>
                        </div>
                    </div>
                </main>
                <footer class="operating-footer">
                    <div class="m-brand">
                        <a class="item">Todo</a>
                        <a class="item">xx</a>
                        <a class="item">xx</a>
                    </div>
                </footer>
            </div>
        </div>
        <!-- Right content -->
        <div id="pdf" class="container-pdf">
            <embed src="">
        </div>
    </div>
</body>
<script>
    //tabSize
	$(function () {

	    //editor基础配置信息
	    var commonOptions = {
            theme: "darcula",
            lineNumbers: true,
            lineWrapping: true,
            autoCloseTags: true,
            autoCloseBrackets: true,
            tabSize: 2,
            extraKeys: {
                "Shift-Enter": shiftAndEnter,
                "Ctrl-/": ctrlAndSlash,
                "Ctrl-S": ctrlAndS
            }
        };
        function ctrlAndS() {
            var htmlValue = htmlEditor.getValue();
            var cssValue = cssEditor.getValue();
            var jsonValue = jsonEditor.getValue();
            postLivePdf({html: htmlValue, css: cssValue, json: jsonValue});
        }
        function shiftAndEnter(e) {
            e.execCommand("goLineEnd");
            e.execCommand("newlineAndIndent");
        }
        function ctrlAndSlash(e) {
            e.toggleComment();
        }

	    var htmlDom = $("#edit").find(".u-code[form='tab-document']").find("textarea")[0];
        var htmlEditor = CodeMirror.fromTextArea(htmlDom, $.extend(true, {}, commonOptions, {
            mode: "htmlmixed"
        }));

        var cssDom = $("#edit").find(".u-code[form='tab-style']").find("textarea")[0];
        var cssEditor = CodeMirror.fromTextArea(cssDom, $.extend(true, {}, commonOptions, {
            mode: "text/css"
        }));

        var jsonDom = $("#edit").find(".u-code[form='tab-data']").find("textarea")[0];
        var jsonEditor = CodeMirror.fromTextArea(jsonDom, $.extend(true, {}, commonOptions, {
            mode: "application/json"
        }));

        function postLivePdf(data) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/document/livePdf", true);
            xhr.setRequestHeader("Content-Type","application/json");
            xhr.responseType = "blob";
            xhr.onload = function (ev) {
                if (ev.currentTarget.status != 200) {
                    return;
                }
                var blob = ev.currentTarget.response;
                var embed = document.createElement("embed");
                embed.src = URL.createObjectURL(blob);
                $("#pdf").empty();
                $("#pdf").append(embed);
            };
            xhr.send(JSON.stringify(data));
        }

        function changeTab(id) {
            $("#edit .u-tabs .tab").removeClass("tab-active");
            $("#"+id).addClass("tab-active");

            $("#edit .u-code").hide();
            $("#edit .u-code[form='"+ id +"']").show();
        }
        $("#edit .u-tabs .tab").click(function () {
            changeTab(this.id);
        });

        function renderEditor(){
            var width = $("#edit .codes").width();
            var height = $("#edit .codes").height();
            htmlEditor.setSize(width, height);
            cssEditor.setSize(width, height);
            jsonEditor.setSize(width, height);
        }
        $(window).resize(renderEditor);

        //页面加载首次初始化页面
        renderEditor();
        changeTab("tab-document");

	})
</script>
</html>